<template>
  <view class="page">
    <nav-bar>
      <template #title> 设置 </template>
    </nav-bar>
    <view class="container">
      <!-- 系统设置 -->
      <view class="system">
        <view class="system-con">
          <view
            class="system-con-item"
            v-for="item in systemData"
            :key="item.title"
            @click="handleToPath(item.path)"
          >
            <view class="system-con-item-left">
              <view class="system-con-item-left-left">
                <svg-icon :iconClass="item.icon" />
              </view>
              <view class="system-con-item-left-right">
                {{ item.title }}
              </view>
            </view>
            <view class="system-con-item-right">
              <van-icon name="arrow" />
            </view>
          </view>
        </view>
      </view>
      <!-- 退出登录 -->
      <view class="logout">
        <view class="logout-con">
          <van-button @click="handleLogout" type="primary" size="large"
            >退出登录</van-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user";
import { showConfirmDialog } from "vant";
const userStore = useUserStore();
const systemData = ref([
  {
    icon: "icon-pwd",
    title: "修改密码",
    path: "editPwd",
  },
  {
    icon: "icon-update",
    title: "检查更新",
    path: "",
  },
  {
    icon: "icon-clear",
    title: "清理缓存",
    path: "",
  },
]);
function handleToPath(path: string) {
  if (path) {
    navigate("navigateTo", path);
  } else {
    uni.showToast({
      title: "模块建设中~",
      icon: "none",
    });
  }
}
function handleLogout() {
  showConfirmDialog({
    title: "系统提示",
    message: "确定退出登录吗？",
  })
    .then(() => {
      // on confirm
      userStore.logOut().then(() => {
        uni.showToast({
          title: "退出登录成功",
        icon: "none",
        });
        setTimeout(() => {
          navigate("navigateTo", "login");
        }, 1000);
      });
    })
    .catch(() => {
      // on cancel
    });

}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 46px);
  .system {
    width: 100%;
    padding: 15px;
    &-con {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 10px;
      &-item {
        width: 100%;
        padding: 10px 13px;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child {
          border-bottom: none;
        }
        &-left {
          display: flex;
          align-items: center;
          &-left {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-right {
            font-size: 14px;
            color: #000;
            padding-left: 5px;
          }
        }
      }
    }
  }
  .logout {
    width: 100%;
    padding: 15px;
    &-con {
      width: 100%;
    }
  }
}
</style>